<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BS模块的运用</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/BS.css">

    <link rel="stylesheet" href="fonts/iconfont.css">

    <style>
        .navbar .dropdown .dropdown-toggle:after {
            font-family: "iconfont" !important;
            content: "\e60e";
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-default p-3">
        <div class="container-fluid px-0">
            <a class="navbar-brand" href="#"><img src="images/logo.svg" alt="" /></a>
            <!-- Mobile view nav wrap -->
            <ul class="navbar-nav navbar-right-wrap ms-auto d-lg-none d-flex nav-top-wrap">
                <li class="dropdown stopevent">
                    <a class="btn btn-light btn-icon rounded-circle text-muted indicator indicator-primary" href="#"
                        role="button" data-bs-toggle="dropdown">
                        <i class="fe fe-bell"> </i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end shadow">
                        <div>
                            <div class="border-bottom px-3 pb-3 d-flex justify-content-between align-items-center">
                                <span class="h5 mb-0">Notifications</span>
                                <a href="# " class="text-muted"><span class="align-middle"><i
                                            class="fe fe-settings me-1"></i></span></a>
                            </div>
                            <ul class="list-group list-group-flush notification-list-scroll">
                                <li class="list-group-item bg-light">
                                    <div class="row">
                                        <div class="col">
                                            <a href="#" class="text-body">
                                                <div class="d-flex">
                                                    <img src="images/avatar-1.jpg" alt=""
                                                        class="avatar-md rounded-circle" />
                                                    <div class="ms-3">
                                                        <h5 class="fw-bold mb-1">Kristin Watson:</h5>
                                                        <p class="mb-3">
                                                            Krisitn Watsan like your comment on course Javascript
                                                            Introduction!
                                                        </p>
                                                        <span class="fs-6 text-muted">
                                                            <span><span
                                                                    class="fe fe-thumbs-up text-success me-1"></span>2
                                                                hours ago,</span>
                                                            <span class="ms-1">2:19 PM</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-auto text-center me-2">
                                            <a href="#!" class="badge-dot bg-info" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="Mark as read">
                                            </a>
                                            <div>
                                                <a href="#" data-bs-toggle="tooltip" data-bs-placement="top"
                                                    title="Remove">
                                                    <i class="fe fe-x text-muted"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col">
                                            <a href="#" class="text-body">
                                                <div class="d-flex">
                                                    <img src="images/avatar-2.jpg" alt=""
                                                        class="avatar-md rounded-circle" />
                                                    <div class="ms-3">
                                                        <h5 class="fw-bold mb-1">Brooklyn Simmons</h5>
                                                        <p class="mb-3">
                                                            Just launched a new Courses React for Beginner.
                                                        </p>
                                                        <span class="fs-6 text-muted">
                                                            <span><span
                                                                    class="fe fe-thumbs-up text-success me-1"></span>Oct
                                                                9,</span>
                                                            <span class="ms-1">1:20 PM</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-auto text-center me-2">
                                            <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="Mark as unread">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col">
                                            <a href="#" class="text-body">
                                                <div class="d-flex">
                                                    <img src="images/avatar-3.jpg" alt=""
                                                        class="avatar-md rounded-circle" />
                                                    <div class="ms-3">
                                                        <h5 class="fw-bold mb-1">Jenny Wilson</h5>
                                                        <p class="mb-3">
                                                            Krisitn Watsan like your comment on course Javascript
                                                            Introduction!
                                                        </p>
                                                        <span class="fs-6 text-muted">
                                                            <span><span
                                                                    class="fe fe-thumbs-up text-info me-1"></span>Oct
                                                                9,</span>
                                                            <span class="ms-1">1:56 PM</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-auto text-center me-2">
                                            <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="Mark as unread">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col">
                                            <a href="#" class="text-body">
                                                <div class="d-flex">
                                                    <img src="images/avatar-4.jpg" alt=""
                                                        class="avatar-md rounded-circle" />
                                                    <div class="ms-3">
                                                        <h5 class="fw-bold mb-1">Sina Ray</h5>
                                                        <p class="mb-3">
                                                            You earn new certificate for complete the Javascript
                                                            Beginner course.
                                                        </p>
                                                        <span class="fs-6 text-muted">
                                                            <span><span class="fe fe-award text-warning me-1"></span>Oct
                                                                9,</span>
                                                            <span class="ms-1">1:56 PM</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="col-auto text-center me-2">
                                            <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="Mark as unread">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="border-top px-3 pt-3 pb-0">
                                <a href="#" class="text-link fw-semi-bold">See all
                                    Notifications</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="dropdown ms-2">
                    <a class="rounded-circle" href="#" role="button" data-bs-toggle="dropdown">
                        <div class="avatar avatar-md avatar-indicators avatar-online">
                            <img alt="avatar" src="images/avatar-1.jpg" class="rounded-circle" />
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end shadow">
                        <div class="dropdown-item">
                            <div class="d-flex">
                                <div class="avatar avatar-md avatar-indicators avatar-online">
                                    <img alt="avatar" src="images/avatar-1.jpg" class="rounded-circle" />
                                </div>
                                <div class="ms-3 lh-1">
                                    <h5 class="mb-1">Annette Black</h5>
                                    <p class="mb-0 text-muted">annette@geeksui.com</p>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown-divider"></div>
                        <ul class="list-unstyled">
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    <i class="fe fe-circle me-2"></i>Status
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <span class="badge-dot bg-success me-2"></span>Online
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <span class="badge-dot bg-secondary me-2"></span>Offline
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <span class="badge-dot bg-warning me-2"></span>Away
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <span class="badge-dot bg-danger me-2"></span>Busy
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a class="dropdown-item" href="./pages/profile-edit.html">
                                    <i class="fe fe-user me-2"></i>Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/student-subscriptions.html">
                                    <i class="fe fe-star me-2"></i>Subscription
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#">
                                    <i class="fe fe-settings me-2"></i>Settings
                                </a>
                            </li>
                        </ul>
                        <div class="dropdown-divider"></div>
                        <ul class="list-unstyled">
                            <li>
                                <a class="dropdown-item" href="#">
                                    <i class="fe fe-power me-2"></i>Sign Out
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- Button -->
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="icon-bar top-bar mt-0"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>
            <!-- Collapse -->
            <div class="collapse navbar-collapse" id="navbar-default">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link  dropdown-toggle" href="#" id="navbarBrowse" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false" data-bs-display="static">
                            Browse
                        </a>
                        <ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarBrowse">
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    Web Development
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Bootstrap</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            React
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            GraphQl</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Gatsby</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Grunt</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Svelte</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Meteor</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            HTML5</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Angular</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    Design
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Graphic Design</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Illustrator
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            UX / UI Design</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Figma Design</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Adobe XD</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Sketch</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Icon Design</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Photoshop</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Mobile App
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    IT Software
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Marketing
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Music
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Life Style
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Business
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">
                                    Photography
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarLanding" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            Landings
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarLanding">
                            <li>
                                <h4 class="dropdown-header">Landings</h4>
                            </li>
                            <li>
                                <a href="./pages/landings/landing-courses.html" class="dropdown-item">
                                    Courses
                                </a>
                            </li>
                            <li>
                                <a href="./pages/landings/course-lead.html" class="dropdown-item">
                                    Lead Course
                                </a>
                            </li>
                            <li>
                                <a href="./pages/landings/request-access.html" class="dropdown-item">
                                    Request Access
                                </a>
                            </li>
                            <li>
                                <a href="./pages/landings/landing-sass.html" class="dropdown-item">
                                    SaaS
                                </a>
                            </li>

                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarPages" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            Pages
                        </a>
                        <ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarPages">
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#!">
                                    Courses
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="./#">
                                            Course Single
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/course-single-v2.html">
                                            Course Single v2
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/course-resume.html">
                                            Course Resume
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            Course Category
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/course-checkout.html">
                                            Course Checkout
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/course-filter-list.html">
                                            Course List/Grid
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/add-course.html">
                                            Add New Course
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#!">
                                    Paths
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="./pages/course-path.html" class="dropdown-item">
                                            Browse Path
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./pages/course-path-single.html" class="dropdown-item">
                                            Path Single
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#!">
                                    Blog
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="./pages/blog.html">
                                            Listing</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/blog-single.html">
                                            Article
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/blog-category.html">
                                            Category</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/blog-sidebar.html">
                                            Sidebar</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#!">
                                    Career
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="./pages/career.html">
                                            Overview</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/career-list.html">
                                            Listing
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/career-single.html">
                                            Opening</a>
                                    </li>

                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#!">
                                    Specialty
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="./pages/coming-soon.html">
                                            Coming Soon
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/404-error.html">
                                            Error 404
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/maintenance-mode.html">
                                            Maintenance Mode
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/terms-condition-page.html">
                                            Terms & Conditions
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <hr class="mx-3" />
                            </li>


                            <li>
                                <a class="dropdown-item" href="./pages/about.html">
                                    About
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#!">
                                    Help Center <span class="badge badge-success ms-1">Pro</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/pricing.html">
                                    Pricing
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/compare-plan.html">
                                    Compare Plan
                                </a>
                            </li>

                            <li>
                                <a class="dropdown-item" href="./pages/contact.html">
                                    Contact
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarAccount" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            Accounts
                        </a>
                        <ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="navbarAccount">
                            <li>
                                <h4 class="dropdown-header">Accounts</h4>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    Instructor
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="text-wrap">
                                        <h5 class="dropdown-header text-dark">Instructor</h5>
                                        <p class="dropdown-text mb-0">
                                            Instructor dashboard for manage courses and earning.
                                        </p>
                                    </li>
                                    <li>
                                        <hr class="mx-3" />
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/dashboard-instructor.html">
                                            Dashboard</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-profile.html">
                                            Profile</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-courses.html">
                                            My Courses
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-order.html">
                                            Orders</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-reviews.html">
                                            Reviews</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-students.html">
                                            Students</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-payouts.html">
                                            Payouts</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/instructor-earning.html">
                                            Earning</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    Students
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="text-wrap">
                                        <h5 class="dropdown-header text-dark">Students</h5>
                                        <p class="dropdown-text mb-0">
                                            Students dashboard to manage your courses and subscriptions.
                                        </p>
                                    </li>
                                    <li>
                                        <hr class="mx-3" />
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/dashboard-student.html">
                                            Dashboard</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/student-subscriptions.html">
                                            Subscriptions
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/payment-method.html">
                                            Payments</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/billing-info.html">
                                            Billing Info</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/invoice.html">
                                            Invoice</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/invoice-details.html">
                                            Invoice Details</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/dashboard-student.html">
                                            Bookmarked</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="./pages/dashboard-student.html">
                                            My Path</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu dropend">
                                <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                    Admin
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="text-wrap">
                                        <h5 class="dropdown-header text-dark">Master Admin</h5>
                                        <p class="dropdown-text mb-0">
                                            Master admin dashboard to manage courses, user, site setting
                                            , and work with amazing apps.
                                        </p>
                                    </li>
                                    <li>
                                        <hr class="mx-3" />
                                    </li>
                                    <li class="px-3 d-grid">
                                        <a href="./pages/dashboard/admin-dashboard.html"
                                            class="btn btn-sm btn-primary">Go to Dashboard</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <hr class="mx-3" />
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/sign-in.html">
                                    Sign In
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/sign-up.html">
                                    Sign Up
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/forget-password.html">
                                    Forgot Password
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/profile-edit.html">
                                    Edit Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/security.html">
                                    Security
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/social-profile.html">
                                    Social Profiles
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/notifications.html">
                                    Notifications
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/profile-privacy.html">
                                    Privacy Settings
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/delete-profile.html">
                                    Delete Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="./pages/linked-accounts.html">
                                    Linked Accounts
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            <i class="fe fe-more-horizontal fs-3"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-md" aria-labelledby="navbarDropdown">
                            <div class="list-group">
                                <a class="list-group-item list-group-item-action border-0" href="./docs/index.html">
                                    <div class="d-flex align-items-center">
                                        <i class="fe fe-file-text fs-3 text-primary"></i>
                                        <div class="ms-3">
                                            <h5 class="mb-0">Documentations</h5>
                                            <p class="mb-0 fs-6">
                                                Browse the all documentation
                                            </p>
                                        </div>
                                    </div>
                                </a>
                                <a class="list-group-item list-group-item-action border-0" href="./docs/changelog.html">
                                    <div class="d-flex align-items-center">
                                        <i class="fe fe-layers fs-3 text-primary"></i>
                                        <div class="ms-3">
                                            <h5 class="mb-0">
                                                Changelog <span class="text-primary ms-1">v2.2.1</span>
                                            </h5>
                                            <p class="mb-0 fs-6">See what's new</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
                <form class="mt-3 mt-lg-0 ms-lg-3 d-flex align-items-center">
                    <span class="position-absolute ps-3 search-icon">
                        <i class="iconfont icon-fangdajing"></i>
                    </span>
                    <input type="search" class="form-control ps-6" placeholder="Search Courses" />
                </form>
                <ul class="navbar-nav navbar-right-wrap ms-auto d-none d-lg-block">
                    <li class="dropdown d-inline-block stopevent">
                        <a class="btn btn-light btn-icon rounded-circle text-muted indicator indicator-primary" href="#"
                            role="button" id="dropdownNotificationSecond" data-bs-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <i class="iconfont icon-lingdang fs-3"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-lg"
                            aria-labelledby="dropdownNotificationSecond">
                            <div>
                                <div class="border-bottom px-3 pb-3 d-flex justify-content-between align-items-center">
                                    <span class="h5 mb-0">Notifications</span>
                                    <a href="# " class="text-muted"><span class="align-middle"><i
                                                class="fe fe-settings me-1"></i></span></a>
                                </div>
                                <ul class="list-group list-group-flush notification-list-scroll ">
                                    <li class="list-group-item bg-light">
                                        <div class="row">
                                            <div class="col">
                                                <a class="text-body" href="#">
                                                    <div class="d-flex">
                                                        <img src="images/avatar-1.jpg" alt=""
                                                            class="avatar-md rounded-circle" />
                                                        <div class="ms-3">
                                                            <h5 class="fw-bold mb-1">Kristin Watson:</h5>
                                                            <p class="mb-3">
                                                                Krisitn Watsan like your comment on course
                                                                Javascript Introduction!
                                                            </p>
                                                            <span class="fs-6 text-muted">
                                                                <span><span
                                                                        class="fe fe-thumbs-up text-success me-1"></span>2
                                                                    hours ago,</span>
                                                                <span class="ms-1">2:19 PM</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-auto text-center me-2">

                                                <a href="#" class="badge-dot bg-info" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Mark as read">
                                                </a>
                                                <div>
                                                    <a href="#" class="bg-transparent" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Remove">
                                                        <i class="fe fe-x text-muted"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col">
                                                <a class="text-body" href="#">
                                                    <div class="d-flex">
                                                        <img src="images/avatar-2.jpg" alt=""
                                                            class="avatar-md rounded-circle" />
                                                        <div class="ms-3">
                                                            <h5 class="fw-bold mb-1">Brooklyn Simmons</h5>
                                                            <p class="mb-3">
                                                                Just launched a new Courses React for Beginner.
                                                            </p>
                                                            <span class="fs-6 text-muted">
                                                                <span><span
                                                                        class="fe fe-thumbs-up text-success me-1"></span>Oct
                                                                    9,</span>
                                                                <span class="ms-1">1:20 PM</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-auto text-center me-2">
                                                <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Mark as unread">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col">
                                                <a class="text-body" href="#">
                                                    <div class="d-flex">
                                                        <img src="images/avatar-3.jpg" alt=""
                                                            class="avatar-md rounded-circle" />
                                                        <div class="ms-3">
                                                            <h5 class="fw-bold mb-1">Jenny Wilson</h5>
                                                            <p class="mb-3">
                                                                Krisitn Watsan like your comment on course
                                                                Javascript Introduction!
                                                            </p>
                                                            <span class="fs-6 text-muted">
                                                                <span><span
                                                                        class="fe fe-thumbs-up text-info me-1"></span>Oct
                                                                    9,</span>
                                                                <span class="ms-1">1:56 PM</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-auto text-center me-2">
                                                <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Mark as unread">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col">
                                                <a class="text-body" href="#">
                                                    <div class="d-flex">
                                                        <img src="images/avatar-4.jpg" alt=""
                                                            class="avatar-md rounded-circle" />
                                                        <div class="ms-3">
                                                            <h5 class="fw-bold mb-1">Sina Ray</h5>
                                                            <p class="mb-3">
                                                                You earn new certificate for complete the Javascript
                                                                Beginner course.
                                                            </p>
                                                            <span class="fs-6 text-muted">
                                                                <span><span
                                                                        class="fe fe-award text-warning me-1"></span>Oct
                                                                    9,</span>
                                                                <span class="ms-1">1:56 PM</span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-auto text-center me-2">
                                                <a href="#" class="badge-dot bg-secondary" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Mark as unread">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="border-top px-3 pt-3 pb-0">
                                    <a href="#" class="text-link fw-semi-bold">See all
                                        Notifications</a>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="dropdown ms-2 d-inline-block">
                        <a class="rounded-circle" href="#" data-bs-toggle="dropdown" data-bs-display="static"
                            aria-expanded="false">
                            <div class="avatar avatar-md avatar-indicators avatar-online">
                                <img alt="avatar" src="images/avatar-1.jpg" class="rounded-circle" width="40"
                                    height="40" />
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <div class="dropdown-item">
                                <div class="d-flex">
                                    <div class="avatar avatar-md avatar-indicators avatar-online">
                                        <img alt="avatar" src="images/avatar-1.jpg" class="rounded-circle" />
                                    </div>
                                    <div class="ms-3 lh-1">
                                        <h5 class="mb-1">Annette Black</h5>
                                        <p class="mb-0 text-muted">annette@geeksui.com</p>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown-divider"></div>
                            <ul class="list-unstyled">
                                <li class="dropdown-submenu dropstart-lg">
                                    <a class="dropdown-item dropdown-list-group-item dropdown-toggle" href="#">
                                        <i class="fe fe-circle me-2"></i>Status
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="#">
                                                <span class="badge-dot bg-success me-2"></span>Online
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">
                                                <span class="badge-dot bg-secondary me-2"></span>Offline
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">
                                                <span class="badge-dot bg-warning me-2"></span>Away
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">
                                                <span class="badge-dot bg-danger me-2"></span>Busy
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="./pages/profile-edit.html">
                                        <i class="fe fe-user me-2"></i>Profile
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="./pages/student-subscriptions.html">
                                        <i class="fe fe-star me-2"></i>Subscription
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="fe fe-settings me-2"></i>Settings
                                    </a>
                                </li>
                            </ul>
                            <div class="dropdown-divider"></div>
                            <ul class="list-unstyled">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="fe fe-power me-2"></i>Sign Out
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <div class="bg-primary">
        <div class="container">
            <!-- Hero Section -->
            <div class="row align-items-center g-0">
                <div class="col-xl-5 col-lg-6 col-md-12">
                    <div class="py-5 py-lg-0">
                        <h1 class="text-white display-4 fw-bold">Welcome to Geeks UI Learning Application
                        </h1>
                        <p class="text-white-50 mb-4 lead">
                            Hand-picked Instructor and expertly crafted courses, designed for the modern students and
                            entrepreneur.
                        </p>
                        <a href="#" class="btn btn-success">Browse Courses</a>
                        <a href="#" class="btn btn-white">Are You Instructor?</a>
                    </div>
                </div>
                <div class=" col-xl-7 col-lg-6 col-md-12 text-lg-end text-center">
                    <img src="images/hero-img.png" alt="" class="img-fluid" />
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white py-4 shadow-sm">
        <div class="container">
            <div class="row align-items-center g-0">
                <!-- Features -->
                <div class="col-xl-4 col-lg-4 col-md-6 mb-lg-0 mb-4">
                    <div class="d-flex align-items-center">
                        <span
                            class="icon-sahpe icon-lg bg-light-warning rounded-circle text-center text-dark-warning fs-4 ">
                            <i class="iconfont icon-shipin1"> </i></span>
                        <div class="ms-3">
                            <h4 class="mb-0 fw-semi-bold">30,000 online courses</h4>
                            <p class="mb-0">Enjoy a variety of fresh topics</p>
                        </div>
                    </div>
                </div>
                <!-- Features -->
                <div class="col-xl-4 col-lg-4 col-md-6 mb-lg-0 mb-4">
                    <div class="d-flex align-items-center">
                        <span
                            class="icon-sahpe icon-lg bg-light-warning rounded-circle text-center text-dark-warning fs-4 ">
                            <i class="iconfont icon-renqun-copy1"> </i></span>
                        <div class="ms-3">
                            <h4 class="mb-0 fw-semi-bold">Expert instruction</h4>
                            <p class="mb-0">Find the right instructor for you</p>
                        </div>
                    </div>
                </div>
                <!-- Features -->
                <div class="col-xl-4 col-lg-4 col-md-12">
                    <div class="d-flex align-items-center">
                        <span
                            class="icon-sahpe icon-lg bg-light-warning rounded-circle text-center text-dark-warning fs-4 ">
                            <i class="iconfont icon-time"> </i></span>
                        <div class="ms-3">
                            <h4 class="mb-0 fw-semi-bold">Lifetime access</h4>
                            <p class="mb-0">Learn on your schedule</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Content 卡片-->
    <div class="pt-lg-12 pb-lg-3 pt-8 pb-6">


        <div class="container  position-relative">
            <div class="row mb-4">
                <div class="col">
                    <h2 class="mb-0">Recommended to you</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-react.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">How to
                                easily create a website with React</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                3h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(7,700)</span>
                        </div>
                        <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div>
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-1.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-graphql.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">GraphQL:
                                introduction to graphQL for beginners</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(9,300)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-angular.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">Angular -
                                the complete guide for beginner</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                1h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(8,890)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-python.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">The Python Course: build web application</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4  pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(13,245)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 左右切换 -->
            <ul class="controls " id="sliderFirstControls" aria-label="Carousel Navigation" tabindex="0">
                <li class="prev" aria-controls="tns1" tabindex="-1" data-controls="prev">
                    <i class="iconfont icon-arrow-left fs-3 tb_z"></i>
                </li>
                <li class="next" aria-controls="tns1" tabindex="-1" data-controls="next" aria-disabled="true">
                    <i class="iconfont icon-arrow-right-copy fs-3 tb_z"></i>
                </li>
            </ul>
        </div>
    </div>

    <div class="pt-lg-12 pb-lg-3 pt-8 pb-6">
        <div class="container position-relative">
            <div class="row mb-4">
                <div class="col">
                    <h2 class="mb-0">Most Popular</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-gatsby.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">How to
                                easily create a website with React</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                3h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(7,700)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-1.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-javascript.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">GraphQL:
                                introduction to graphQL for beginners</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 46m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(9,300)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-css.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">Angular -
                                the complete guide for beginner</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 46m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Advance
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(8,890)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-wordpress.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">The Python Course: build web application</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 30m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Intermediate
                            </li>
                        </ul>
                        <div class="lh-1 px-4  pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(16,500)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 左右切换 -->
            <ul class="controls " id="sliderFirstControls" aria-label="Carousel Navigation" tabindex="0">
                <li class="prev" aria-controls="tns1" tabindex="-1" data-controls="prev">
                    <i class="iconfont icon-arrow-left fs-3 tb_z"></i>
                </li>
                <li class="next" aria-controls="tns1" tabindex="-1" data-controls="next" aria-disabled="true">
                    <i class="iconfont icon-arrow-right-copy fs-3 tb_z"></i>
                </li>
            </ul>
        </div>
    </div>

    <div class="pt-lg-12 pb-lg-3 pt-8 pb-6">
        <div class="container position-relative">
            <div class="row mb-4">
                <div class="col">
                    <h2 class="mb-0">Trending</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-react.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">How to
                                easily create a website with React</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                3h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(7,700)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-1.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-graphql.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">GraphQL:
                                introduction to graphQL for beginners</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(9,300)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-angular.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">Angular -
                                the complete guide for beginner</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                1h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4 pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(8,890)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-3.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-3">
                    <div class="card  card-hover">
                        <img src=" images/course-python.jpg" class="card-img-top" alt="...">
                        <div class="card-body pb-0">
                            <h4 class="card-title">The Python Course: build web application</h4>
                            <p class="card-text">

                            </p>
                        </div>
                        <!-- <ul class="list-group list-group-flush">

                        </ul> -->
                        <ul class="mb-3 list-inline px-4">
                            <li class="list-inline-item">
                                <i class="iconfont icon-time"></i>
                                2h 56m
                            </li>
                            <li class="list-inline-item">
                                <i class="iconfont icon-xinhao2"></i>
                            </li>
                            <li class="list-inline-item">
                                Beginner
                            </li>
                        </ul>
                        <div class="lh-1 px-4  pb-4">
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <i class="iconfont icon-xingzhuang60kaobei2 text-warning"></i>
                            <span class="text-warning">4.5</span>
                            <span class="fs-6 text-muted">(13,245)</span>
                        </div>
                        <!-- <div class="card-body">
                            <span class="text-dark fw-bold">$600</span>
                            <del class="fs-6 text-muted">$750</del>
                        </div> -->
                        <!-- Card Footer -->
                        <div class="card-footer">
                            <div class="row align-items-center g-0">
                                <div class="col-auto">
                                    <img src="images/avatar-4.jpg" class="rounded-circle avatar-xs" alt="">
                                </div>
                                <div class="col ms-2">
                                    <span>Morris Mccoy</span>
                                </div>
                                <div class="col-auto">
                                    <a href="#">
                                        <i class="iconfont icon-aixin2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 左右切换 -->
            <ul class="controls " id="sliderFirstControls" aria-label="Carousel Navigation" tabindex="0">
                <li class="prev" aria-controls="tns1" tabindex="-1" data-controls="prev">
                    <i class="iconfont icon-arrow-left fs-3 tb_z"></i>
                </li>
                <li class="next" aria-controls="tns1" tabindex="-1" data-controls="next" aria-disabled="true">
                    <i class="iconfont icon-arrow-right-copy fs-3 tb_z"></i>
                </li>
            </ul>
        </div>
    </div>




    <!-- Footer -->
    <div class="footer pt-5">
        <div class="container">
            <div class="row align-items-center g-0 border-top py-2">
                <!-- Desc -->
                <div class="col-md-6 col-12 text-center text-md-start">
                    <span>© 2021 Geeks. All Rights Reserved.</span>
                </div>
                <!-- Links -->
                <div class="col-12 col-md-6">
                    <nav class="nav nav-footer justify-content-center justify-content-md-end">
                        <a class="nav-link active ps-0" href="#">Privacy</a>
                        <a class="nav-link" href="#">Terms </a>
                        <a class="nav-link" href="#">Feedback</a>
                        <a class="nav-link" href="#">Support</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script src="bootstrap/js/bootstrap.bundle.js"></script>

</body>

</html>